<template>
    <div class="cost-management">
        <h2 style="text-align: center">批发销售工费管理</h2>
        <div><button class="add-cost-button" @click="costPopWindow">增加工费</button></div>
       <el-table class="table" :data="tableData" border style="width: 98%">
      
      <el-table-column  align="center" prop="number" label="序号" width="280" type="index"> </el-table-column>
      <el-table-column align="center" prop="colour" label="成色" width="300"> </el-table-column>
      <el-table-column align="center" prop="style" label="款式" width="300"> </el-table-column>
      <el-table-column align="center" prop="price" label="基本工费(元)" width="320">
      </el-table-column>
 
      <el-table-column align="center" label="操作" width="307">
        <template slot-scope="scope">
          <el-button
            class="edit"
            @click="handleEdit(scope.$index, scope.row)"
            type="text"
            size="small"
            >编辑</el-button>
          
          <el-button class="delete" type="text" size="small" @click="deleteRowCost(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table> 

    
    <!--增加工费弹出框--> 
    <AddCostWindow  class="add-new-cost" ref="addcostwindow" />
    <EditCostWindow
        class="edit-pop-window"
        ref="editcostwindow"
        :tableData2="this.tableData2"
      />
    


    </div>
</template>

<script>
import AddCostWindow from '@/components/goodsset/AddCostWindow.vue'
import EditCostWindow from '@/components/goodsset/EditCostWindow.vue'
import { getCostList } from '../../http/api'
import { deleteCost } from '../../http/api'


export default {
  components:{
    AddCostWindow,
    EditCostWindow
  },
    
 created() {
   this.getCostList()
 },   

data() {
    return {
      tableData2: {},
      tableData: [
        {
          colour: '18K金',
          style: '项链',
          price:'66'
        },
        {
          colour: '18K金',
          style: '戒指',
          price:'33'
        }

        
      ],
      delbyid: [],

      

    };
  },

methods:{
    costPopWindow(){
     let a=document.getElementsByClassName('cost-pop-window')[0]
     a.style.display='block'
     console.log('111')
    },

    cancleButton(){
     let a=document.getElementsByClassName('cost-pop-window')[0]
     a.style.display='none'       
    },

     getCostList() {
      getCostList()
        .then((res) => {
          this.tableData = res.data.value.data
          console.log(res)
        })
        .catch((err) => {
          console.log('接口调用失败', err)
        })
    },

      deleteRowCost(row) {
      this.$confirm('是否确认删除本行信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
           var delbyid = []
          delbyid.push(row.id)
          console.log(row.id)
          //删除当前行信息请求
          deleteCost(delbyid)
            .then((value) => {
              console.log('删除成功', value.msg)
              // 删除后重新发送获取列表的请求
              this.getCostList()
            })
            .catch((err) => {
              console.log('删除失败', err)
              console.log(row.id)
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    editButton(){
    let b = document.getElementsByClassName('edit-pop-window')[0]
    b.style.display = 'block'
    },

    addButton(){
    let b = document.getElementsByClassName('add-new-cost')[0]
    b.style.display = 'block'
    },

    

        //编辑当前行信息
    handleEdit(index, row) {
      console.log(index, row)
      this.editButton()

      this.$refs.editcostwindow.ruleForm = row
      console.log('编辑表单数据',row);
    },

   
}
}
</script>


<style scope>
.demo-ruleForm{
  width: 825px;
}
.table{
  margin-left: 30px;
}
.cost-management{
    position: relative;

}
.add-cost-button{
  width: 80px;
  padding: 10px 10px;
  color: whitesmoke;
  background-color: #7266BA;
  border: none;
  cursor: pointer;
  margin-left: 30px;
}
.button3{
    margin-left: 320px;
    margin-bottom: 20px;
}
.title{
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: #79C5FF;
    margin-bottom: 30px;
    text-align: center;
    font-size: larger;
    font-weight: 500;
}
.edit {
  width: 50px;
  color: whitesmoke;
  background-color: #18bb9c;
}
.delete {
  width: 50px;
  color: whitesmoke;
  background-color: #f66c6c;
}

.immediately-create{
  background-color: #FFFFFF;
  padding: 12px 15px;
  border: 1px solid #DCDFE6;
  color: #606266;
}
.immediately-create:hover{
  background-color: #ECF5FF;
}
</style>